<template>
  <el-drawer
    v-model="visible"
    :title="paramsProps.title"
    size="35%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
  >
    <el-form
      ref="clienFormRef"
      :model="paramsProps.row"
      :rules="rules"
      label-width="100px"
      size="default"
      :disabled="false"
      label-suffix=" :"
      @submit.enter.prevent="handleSubmit"
    >
      <el-form-item label="状态" prop="state" required>
        <el-switch
          v-model="paramsProps.row.state"
          :active-value="1017001"
          :inactive-value="1017002"
          active-text="启用"
          inactive-text="禁用"
          inline-prompt
          :active-action-icon="Check"
          :inactive-action-icon="Close"
        />
        <!--  <el-select v-model="paramsProps.row.state" placeholder="请选择状态" clearable>
          <el-option
            v-for="op in optionsStore.getDictOptions('basic_client_state')"
            :key="op.id"
            :label="op.codeName"
            :value="op.id"
          />
        </el-select> -->
      </el-form-item>

      <el-form-item label="客户名称" prop="cName">
        <el-input v-model="paramsProps.row.cName" placeholder="请输入客户名称" clearable />
      </el-form-item>

      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="paramsProps.row.phone" placeholder="请输入联系电话" clearable />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="paramsProps.row.email" placeholder="请输入邮箱" clearable />
      </el-form-item>

      <el-form-item label="地址" prop="address">
        <el-input v-model="paramsProps.row.address" placeholder="请输入地址" clearable />
      </el-form-item>

      <el-form-item label="所在单位" prop="orgName">
        <el-input v-model="paramsProps.row.orgName" placeholder="请输入所在单位" clearable />
      </el-form-item>

      <el-form-item label="税号" prop="taxNum">
        <el-input v-model="paramsProps.row.taxNum" placeholder="请输入税号" clearable />
      </el-form-item>

      <el-form-item label="开户行" prop="bankName">
        <el-input v-model="paramsProps.row.bankName" placeholder="请输入开户行" clearable />
      </el-form-item>

      <el-form-item label="银行卡号" prop="bankCard">
        <el-input v-model="paramsProps.row.bankCard" placeholder="请输入银行卡号" clearable />
      </el-form-item>

      <el-form-item label="发票信息" prop="billInfo">
        <el-input v-model="paramsProps.row.billInfo" type="textarea" placeholder="请输入发票信息" clearable />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="paramsProps.row.remark" placeholder="请输入备注" clearable />
      </el-form-item>

      <template v-if="paramsProps.isAdd == false">
        <el-form-item label="创建时间" prop="creater_at">
          <el-input disabled readonly v-model="paramsProps.row.creater_at" />
        </el-form-item>
        <el-form-item label="更新时间" prop="updata_at">
          <el-input disabled readonly v-model="paramsProps.row.updata_at" />
        </el-form-item>
        <el-form-item label="创建人" prop="creater_username">
          <el-input disabled readonly v-model="paramsProps.row.creater_username" />
        </el-form-item>
        <el-form-item label="更新人" prop="updata_username">
          <el-input disabled readonly v-model="paramsProps.row.updata_username" />
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <el-button @click="visible = false"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-drawer>
</template>

<script setup name="ClientForm">
import { ref, nextTick } from 'vue';
import { useOptionsStore } from '@/stores/modules/options';
import { ElMessage } from 'element-plus';
import { Check, Close } from '@element-plus/icons-vue';
const optionsStore = useOptionsStore();

const visible = ref(false);

const rules = ref({
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  cName: [
    { required: true, message: '请输入客户名称', trigger: 'blur' },
    { min: 1, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }]
});

const paramsProps = ref({
  title: '',
  row: {},
  api: undefined,
  getTableList: undefined,
  isAdd: true
});
const clienFormRef = ref();
const handleSubmit = () => {
  clienFormRef.value.validate(async valid => {
    if (!valid) return;
    try {
      await paramsProps.value.api(paramsProps.value.row);
      ElMessage.success({ message: `${paramsProps.value.title}成功！` });
      paramsProps.value.getTableList();
      visible.value = false;
    } catch (error) {
      console.log(error);
    }
  });
};
const acceptParams = params => {
  paramsProps.value = params;
  visible.value = true;
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped>
/* 可按需补充样式 */
</style>
